@import "~@/mixin.less";

.page {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  font: 13px/1.5 Helvetica,arial,sans-serif;
  background: #ccc url(../../assets/option-bg.png);

  .wrapper {
    width: 550px;
    margin: 40px auto 80px auto;
    border: 1px solid #fff;
    -webkit-box-shadow: #404040 0 5px 10px;
    background-color: #FFF;
    -webkit-border-radius: 5px;
    .optionHeader {
      position: relative;
      background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eceff5));
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
      border-bottom: 1px solid #ddd;
      h1 {
        margin: 0;
        line-height: 40px;
        text-indent: 10px;
        font-size: 16px;
        color: #5d758a;
        text-shadow: 0 1px 0 #fff;
        font-weight: bold;
        &:before {
          content: '';
          position: absolute;
          bottom: 0;
          right: 10px;
          width: 48px;
          height: 48px;
          background: url(../../assets/manifest/LOGO_48.png) no-repeat 0 5px;
        }
      }
    }

    .optionBody {
      padding: 0 10px 10px 10px;
      position: relative;
      .toolbar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
    }
    .optionFooter {
      background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#eceff5));
      border-top: 1px solid #ddd;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      text-align: right;
      padding: 6px 10px;
    }
    .regionContainer {
      max-height: 225px;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      overflow: auto;
      padding: 0 10px;
      margin-bottom: 5px;
      .title {
        font-size: 1.2em;
      }
      .subTitle {
        font-size: 0.9em;
      }
      .detail {
        display: flex;
        flex-direction: row;
        .temperature {
          font-size: 2em;
        }
        .desc {
          font-size: 1em;
          align-self: flex-end;
          display: flex;
          align-items: center;
          .img {
            width: 30px;
          }
        }
      }
    }

  }
}